<ui:composition template="template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
		<title>DataTable Row Height Sample</title>
		<style type="text/css">
table tr td {
	height: 80px;
}
</style>
	</h:head>

	<ui:param name="panelTitle" value="Listado de transacciones de playas" />

	<ui:define name="panelContent" class="admin-font">

		<p:panel id="panel">
			<h:panelGrid columns="1" cellpadding="5">

				<h:panelGrid columns="3" cellpadding="5">
					<p:column>
						<h:outputLabel value="Playa:" for="autoCompletePlaya" />
					</p:column>
					<p:column>
						<p:autoComplete id="autoCompletePlaya" dropdown="true" size="30"
							value="#{transaccionPlayaMB.acTxtPlaya}"
							completeMethod="#{transaccionPlayaMB.complete}"
							scrollHeight="150" />
					</p:column>

					<p:column>
						<div align="left">
							<p:selectBooleanCheckbox
								value="#{transaccionPlayaMB.soloHabilitadas}">
								<p:ajax event="change" update="autoCompletePlaya"
									listener="#{transaccionPlayaMB.changeSoloHabilitadas()}" />
							</p:selectBooleanCheckbox>
							<h:outputText value="Ver solo playas habilitadas"
								styleClass="fuente-outputtext" />
						</div>

					</p:column>

				</h:panelGrid>

				<h:panelGrid columns="6" cellpadding="5" style="width:100%">
					<p:column>
						<h:outputText value="Desde:   " />
					</p:column>

					<p:column>
						<p:calendar value="#{transaccionPlayaMB.fechaDesde}" id="calDesde"
							navigator="true" locale="es" showButtonPanel="true"
							pattern="dd/MM/yyyy" />
					</p:column>

					<p:column>
						<h:outputText value="Hasta:   " />
					</p:column>

					<p:column>
						<p:calendar value="#{transaccionPlayaMB.fechaHasta}" id="calHasta"
							navigator="true" locale="es" showButtonPanel="true"
							pattern="dd/MM/yyyy" />
					</p:column>

					<div align="right">
						<p:commandButton id="buscarButton" value="Buscar"
							icon="ui-icon-search"
							action="#{transaccionPlayaMB.updateTransaccionesPorFechaList}"
							ajax="true" update="transacciones" />
					</div>
				</h:panelGrid>
			</h:panelGrid>
		</p:panel>

		<br />

		<p:dataTable id="transacciones" var="transaccionPlaya"
			rowStyleClass="#{transaccionPlaya.importe >= 0 ? null : 'negative-row'}"
			value="#{transaccionPlayaMB.transaccionesPorFechaList}"
			filteredValue="#{filtrosMB.filteredTransaccionesPlaya}"
			widgetVar="transaccionesTable" paginatorPosition="bottom"
			paginator="true" rows="20" emptyMessage="No existen transacciones">

			<f:facet name="header">  
            	Listado de transacciones  
        	</f:facet>

			<p:column headerText="Fecha" styleClass="column-font"
				filterBy="#{transaccionPlaya.fecha}" filterMatchMode="contains">
				<f:facet name="header">
					<h:outputText value="Fecha" />
				</f:facet>
				<h:outputText value="#{transaccionPlaya.fecha}">
					<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
				</h:outputText>
			</p:column>

			<p:column headerText="Tipo Pago" styleClass="column-font"
				filterBy="#{transaccionPlaya.tipoPago}"
				filterOptions="#{filtrosMB.tipoPagoOptions}" filterMatchMode="exact">
				<f:facet name="header">
					<h:outputText value="Tipo Pago" />
				</f:facet>
				<h:outputText value="#{transaccionPlaya.tipoPago.nombre}" />
			</p:column>

			<p:column headerText="Importe" styleClass="column-font"
				filterBy="#{transaccionPlaya.importe}" filterMatchMode="contains">
				<f:facet name="header">
					<h:outputText value="Importe" />
				</f:facet>
				<h:outputText value="#{transaccionPlaya.importe}">
					<f:convertNumber type="currency" currencySymbol="$ " />
				</h:outputText>
			</p:column>

			<p:column headerText="Descripción" styleClass="column-font"
				filterBy="#{transaccionPlaya.detalleEstadia.vehiculo.patente}"
				filterMatchMode="contains" width="450">
				<f:facet name="header">
					<h:outputText value="Descripción" />
				</f:facet>

				<ui:fragment rendered="#{transaccionPlaya.detalleEstadia != null}">
					<h:outputText value="Vehículo: " />
					<b> <h:outputText
							value="#{transaccionPlaya.detalleEstadia.vehiculo.patente}" /></b>
					<h:outputText
						value=" (#{transaccionPlaya.detalleEstadia.vehiculo.cliente.usuario.nombre} 
						#{transaccionPlaya.detalleEstadia.vehiculo.cliente.usuario.apellido})" />


					<h:outputText value=" - Empleado: " />
					<h:outputText
						value="#{transaccionPlaya.detalleEstadia.empleado.usuario.nombre} 
					#{transaccionPlaya.detalleEstadia.empleado.usuario.apellido}" />
				</ui:fragment>

				<ui:fragment rendered="#{transaccionPlaya.detalleEstadia == null}">
					<ui:fragment rendered="#{transaccionPlaya.importe lt 0}">

						<h:outputText value="Comisión Servicios PLAYÓN. Liquidación: " />
						<h:outputText value="#{transaccionPlaya.liquidacion.fecha}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</ui:fragment>

					<ui:fragment rendered="#{transaccionPlaya.importe gt 0}">
						<h:outputText value="Nuevo Abono " />
					</ui:fragment>
				</ui:fragment>

			</p:column>

			<p:column headerText="Opciones" styleClass="column-options"
				exportable="false" style="text-align:center; width:80px;">


				<ui:fragment rendered="#{transaccionPlaya.detalleEstadia != null}">

					<p:commandLink id="view3" oncomplete="estadiasDialog.show();"
						update=":mainForm:estadiasDlg" title="Detalle de estadía">
						<f:setPropertyActionListener value="#{transaccionPlaya}"
							target="#{transaccionPlayaMB.transaccionSelected}" />
						<h:graphicImage library="images/icons" name="search.png" />
					</p:commandLink>

				</ui:fragment>

				<ui:fragment rendered="#{transaccionPlaya.detalleEstadia == null}">
					<h:graphicImage library="images/icons" name="transparent.png" />
				</ui:fragment>


			</p:column>

			<p:dataTable id="transaccionesP" var="transaccionPlaya"
				value="#{transaccionPlayaMB.transaccionesPorFechaList}"
				filteredValue="#{filtrosMB.filteredTransaccionesPlaya}"
				widgetVar="transaccionesTable" paginatorPosition="bottom"
				paginator="true" rows="20" emptyMessage="No existen transacciones"
				style="display:none">


				<p:column headerText="Fecha" styleClass="column-font"
					filterBy="#{transaccionPlaya.fecha}" filterMatchMode="contains">
					<f:facet name="header">
						<h:outputText value="Fecha" />
					</f:facet>
					<h:outputText value="#{transaccionPlaya.fecha}">
						<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
					</h:outputText>
				</p:column>

				<p:column headerText="Tipo Pago" styleClass="column-font"
					filterBy="#{transaccionPlaya.tipoPago}"
					filterOptions="#{filtrosMB.tipoPagoOptions}"
					filterMatchMode="exact">
					<f:facet name="header">
						<h:outputText value="Tipo Pago" />
					</f:facet>
					<h:outputText value="#{transaccionPlaya.tipoPago.nombre}" />
				</p:column>

				<p:column headerText="Importe" styleClass="column-font"
					filterBy="#{transaccionPlaya.importe}" filterMatchMode="contains">
					<f:facet name="header">
						<h:outputText value="Importe" />
					</f:facet>
					<h:outputText value="#{transaccionPlaya.importe}">
						<f:convertNumber type="currency" currencySymbol="$ " />
					</h:outputText>
				</p:column>

				<p:column headerText="Cobrado" styleClass="column-font">
					<f:facet name="header">
						<h:outputText value="Cobrado" />
					</f:facet>
					<h:outputText
						value="#{transaccionPlaya.detalleEstadia.cobrado ? 'Si' : 'No'}" />
				</p:column>

				<p:column headerText="Empleado" styleClass="column-font"
					filterBy="#{transaccionPlaya.detalleEstadia.empleado.usuario.nombre}"
					filterMatchMode="contains">
					<f:facet name="header">
						<h:outputText value="Empleado" />
					</f:facet>
					<h:outputText
						value="#{transaccionPlaya.detalleEstadia.empleado.usuario.nombre} 
                                        #{transaccionPlaya.detalleEstadia.empleado.usuario.apellido}" />
				</p:column>

				<p:column headerText="Vehículo" styleClass="column-font"
					filterBy="#{transaccionPlaya.detalleEstadia.vehiculo.patente}"
					filterMatchMode="contains">
					<f:facet name="header">
						<h:outputText value="Vehículo" />
					</f:facet>
					<h:outputText
						value="#{transaccionPlaya.detalleEstadia.vehiculo.patente}" />
				</p:column>

				<p:column headerText="Opciones" styleClass="column-options"
					exportable="false" style="text-align:center; width:120px;">

					<p:commandLink id="view3" oncomplete="estadiasDialog.show();"
						update=":mainForm:estadiasDlg" title="OPC">
						<f:setPropertyActionListener value="#{transaccionPlaya}"
							target="#{transaccionPlayaMB.transaccionSelected}" />
						<h:graphicImage library="images/icons" name="search.png" />
					</p:commandLink>
				</p:column>
			</p:dataTable>

			<f:facet name="footer">
				<div align="center">
					<h:panelGrid columns="2" header="Exportar" style="width:100px;">
						<h:commandLink title="Exportar a excel">
							<p:graphicImage
								value="http://www.primefaces.org/showcase/images/excel.png" />
							<p:dataExporter type="xls" target="transaccionesP"
								fileName="Transacciones" />
						</h:commandLink>

						<h:commandLink title="Exportar a PDF">
							<p:graphicImage
								value="http://www.primefaces.org/showcase/images/pdf.png" />
							<p:dataExporter type="pdf" target="transaccionesP"
								preProcessor="#{transaccionPlayaMB.listadoTransaccionesPDF}"
								fileName="Transacciones" />
						</h:commandLink>
					</h:panelGrid>
				</div>
			</f:facet>


		</p:dataTable>

		<!-- DIALOG PARA VER LOS DATOS DE LA ESTADIA DE LA TRANSACCION SELECCIONADA -->
		<p:dialog header="Datos de la Estadía" widgetVar="estadiasDialog"
			dynamic="false" resizable="false" id="estadiasDlg" showEffect="fade"
			position="center,top" modal="true" draggable="true">

			<h:panelGrid id="displayView" columns="2" cellpadding="8"
				styleClass="ui-datatable ui-widget"
				style="margin:0 auto;width:500px;border: 1px solid rgb(197, 219, 236);">

				<p:column style="width:100px; ">
					<b> <h:outputText style="color: rgb(46, 110, 158); "
							value="Datos estadía" />
					</b>
				</p:column>

				<p:column />

				<p:column style="width:100px;">
					<h:outputText value="Ingreso: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.fechaHoraIngreso}"
						style="font-weight:bold">
						<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
					</h:outputText>
				</p:column>

				<p:column>
					<h:outputText value="Egreso " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.fechaHoraEgreso}"
						style="font-weight:bold">
						<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
					</h:outputText>


				</p:column>

				<p:column>
					<h:outputText value="Importe total: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.importeTotal}"
						style="font-weight:bold">
						<f:convertNumber type="currency" currencySymbol="$ " />
					</h:outputText>
				</p:column>

				<p:column>
					<h:outputText value="Cobrado: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.cobrado ? 'Si' : 'No'}"
						style="font-weight:bold" />
				</p:column>

				<p:column>
					<h:outputText value="Promoción: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.promocion.descripcion ? 'Si' : 'No'}"
						style="font-weight:bold" />
				</p:column>

				<p:column>
					<h:outputText value="Empleado: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.empleado.usuario.nombre} 
                                                #{transaccionPlayaMB.transaccionSelected.detalleEstadia.empleado.usuario.apellido}"
						style="font-weight:bold" />
				</p:column>

				<p:column style="width:100px; ">
					<b> <h:outputText style="color: rgb(46, 110, 158); "
							value="Datos vehículo" />
					</b>
				</p:column>

				<p:column />

				<p:column>
					<h:outputText value="Patente: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.vehiculo.patente}"
						style="font-weight:bold" />
				</p:column>

				<p:column>
					<h:outputText value="Modelo: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.vehiculo.modeloVehiculo.marcaVehiculo.nombre}"
						style="font-weight:bold" />
					<h:outputText
						value=" #{transaccionPlayaMB.transaccionSelected.detalleEstadia.vehiculo.modeloVehiculo.nombre}"
						style="font-weight:bold" />
				</p:column>

				<p:column>
					<h:outputText value="Cliente: " />
				</p:column>
				<p:column>
					<h:outputText
						value="#{transaccionPlayaMB.transaccionSelected.detalleEstadia.vehiculo.cliente.usuario.nombre} 
						#{transaccionPlayaMB.transaccionSelected.detalleEstadia.vehiculo.cliente.usuario.apellido}"
						style="font-weight:bold" />
				</p:column>


			</h:panelGrid>

			<br />
			<div align="right">
				<p:commandButton id="btnAceptar" value="Aceptar"
					onclick="estadiasDialog.hide()" type="button" />
			</div>
		</p:dialog>
	</ui:define>
</ui:composition>